<template>
	<view class="forget-pass">
		<navbar ref="navbar" :config="config" backColor="#000000"></navbar>
		<form @submit="formSubmit">
			<!-- <view class="used-phone">
				<view class="user-phone-item">
					旧手机号
				</view>
				<input type="text" name="usedPhone" value="" v-model="userPhone" disabled="true"
					placeholder-style="color:#cccccc; font-size:28rpx;" maxlength="11" @input="onUsedPhone"
					placeholder="请输入您以前的手机号" />
			</view> -->
			<!-- 			<view class="background">
				
			</view> -->
			<view class="phone">
				
				<input type="number" name="phone" value="" placeholder-style="color:#cccccc; font-size:28rpx;"
					maxlength="11" @input="onPhone" placeholder="请输入新手机号" />
			</view>
		
			<view class="verification-code">
				
				<input type="text" name="code" value="" placeholder-style="color:#cccccc; font-size:28rpx;"
					maxlength="6" @input="onCode" placeholder="请输入验证码" />
				<button class="verification-right" :disabled="disabled" @click="obtainCode"
					:class="isPhone?'active':''">
					{{verificationCode}}
				</button>
			</view>

			<view class="button">
				<button form-type="submit">确认提交</button>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		getVerfityCode,
		changeMobile
	} from "@/api/login.js"
	export default {
		data() {
			return {
				config: {
					back: true, //false是tolbar页面 是则不写
					title: '更换手机号',
					color: '#000',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, "#fff"],
					statusBarFontColor: '#1A1A1A',
					backIconColor: "#000"
				},
				phone: "", //手机号
				usedPhone: "", //旧手机号
				usedIsPhone: false,
				isPhone: false, //手机号正则
				code: "", //验证码
				disabled: false,
				time: 60,
				verificationCode: "发送验证码",
				userPhone: null
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {

				this.$http.get("/account/app-info").then(res => {
					if (res && res.code == 200) {
						console.log(res.data.mobile)
						this.userPhone = res.data.mobile
					}


				})
			},

			//获取验证码
			obtainCode() {
				console.log(666)
				if (this.isPhone) {
					this.$http.get("/account/verify-mobile/" + this.phone).then(res => {
						if (res && res.code == 200) {
							if (res.data == true) {
								this.$mUtil.toast("该手机号已被注册")
							} else {
								this.$http.post(getVerfityCode, this.phone).then(res => {
									if (res && res.code == 200) {
										this.disabled = false;
										this.isPhone = false;
										this.verificationCode = this.time + "s"+"秒后重发";
										this.clear = setInterval(this.countDown, 1000);
									}
								})
							}

						}
					})
				}
			},
			countDown() {
				if (this.time <= 0) {
					this.disabled = false;
					this.verificationCode = "重新获取";
					this.isPhone = true;
					this.time = 60;
					clearInterval(this.clear)
				} else {
					--this.time;
					this.verificationCode = this.time + 's'
				}
			},
			//清楚计时器
			beforeDestroy() {
				clearInterval(this.clear)
			},

			//手机号
			onPhone(e) {
				this.phone = e.detail.value
				if (this.phone.match(this.$mConfig.telRegex)) {
					if (this.verificationCode == '发送验证码' || this.verificationCode == '重新获取') {
						this.isPhone = true
					}

				} else {
					this.isPhone = false
				}
			},

			//旧手机号
			onUsedPhone(e) {
				this.usedPhone = e.detail.value
				if (this.usedPhone.match(this.$mConfig.telRegex)) {
					this.usedIsPhone = true
				} else {
					this.usedIsPhone = false
				}
			},
			//验证码
			onCode(e) {
				this.code = e.detail.value
			},

			//提交信息
			formSubmit(e) {
				let target = e.detail.value;
				if (!target.usedPhone) {
					this.$mUtil.toast('请输入旧手机号')
					return false
				}
				if (!target.phone) {
					this.$mUtil.toast("请输入新手机号")
					return false
				}
				if (target.phone == target.usedPhone) {
					this.$mUtil.toast('新手机号和旧手机号相同')
					return false
				}
				if (!(target.phone.match(this.$mConfig.telRegex))) {
					this.$mUtil.toast("请输入正确的手机号")
					return false
				}
				if (!target.code) {
					this.$mUtil.toast("请输入验证码")
					return false
				}
				let param = {
					mobile: target.usedPhone,
					new_mobile: target.phone,
					captcha: target.code
				}
				this.$http.get("/account/verify-mobile/" + param.new_mobile).then(res => {
					if (res && res.code == 200) {
						if (res.data == true) {
							this.$mUtil.toast("该手机号已被注册")
						} else {
							this.$http.post(changeMobile, param)
								.then(res => {
									if (res.code == 200) {
										this.$mUtil.toast("修改成功")
										setTimeout(() => {
											uni.reLaunch({
												url: "../register/login"
											})
										}, 2000)
										this.$mUtil.toast("修改成功")
									}
								})
						}
					}
				})


			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F9F9F9;
	}
	.used-phone {
		display: flex;
		align-items: center;
		align-items: center;
		margin-top: 19rpx;
		margin-left: 38rpx;
		// margin: 0 65rpx;
		// padding: 30rpx 0;
		// border-bottom: 1rpx solid #E6E6E6;
		
		
		width: 673rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		
		

		.user-phone-item {
			font-size: 28rpx;
			color: #474747;
			// font-weight: 400;

		}

		input {
			flex: 1;
			margin-left: 60rpx;
			color: #AAAAAA;
		}
	}

	.button {
		display: flex;
		justify-content: center;
		// margin: 700rpx 30rpx 0 30rpx;
		position: fixed;
		bottom: 38rpx;
		
		button {
			width: 673rpx;
			height: 88rpx;
			background: #FF211F;
			border-radius: 19rpx 19rpx 19rpx 19rpx;
			font-weight: 400;
			font-size: 29rpx;
			color: #FFFFFF;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin-left: 38rpx;
		}
	}

	.phone {
		width: 673rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		margin-top: 19rpx;
		margin-left: 38rpx;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		.phone-item {
			font-size: 28rpx;
			font-weight: 400;
			color: #474747;

		}

		input {
			flex: 1;
			margin-left: 19rpx;
			color: #AAAAAA;
		}
	}

	.verification-code {
		width: 673rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		margin-top: 19rpx;
		margin-left: 38rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		.verification-item {
			font-size: 28rpx;
			font-weight: 400;
			color: #474747;
		}

		input {
			flex: 1;
			margin-left: 19rpx;
			color: #AAAAAA;
		}

		.verification-right {
			width: 154rpx;
			height: 65rpx;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 2rpx solid #FF211F;
			font-size: 23rpx;
			color: #FF211F;
			line-height: 27rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin-right: 15rpx;
		}

		.active {
			background-color: #FF721B;
			color: #FFFFFF;
		}
	}

	.background {
		height: 10rpx;
		background-color: #F5F5F5;
	}

	.new-pass {
		margin: 0 30rpx;
		display: flex;
		align-items: center;
		padding: 23rpx 0 30rpx 0;
		border-bottom: 1rpx solid #E6E6E6;

		.new-pass-item {
			font-size: 28rpx;
			color: #1A1A1A;
			font-weight: 400;
		}

		input {
			flex: 1;
			margin-left: 88rpx;
		}
	}

	.confirm-pass {
		margin: 0 30rpx;
		display: flex;
		padding: 34rpx 0 30rpx 0;
		border-bottom: 1rpx solid #E6E6E6;

		.confirm-pass-item {
			font-size: 28rpx;
			font-weight: 400;
			color: #1A1A1A;
		}

		input {
			flex: 1;
			margin-left: 60rpx;
		}
	}
</style>